<div class="table-responsive">
    <div id="data-table_wrapper" class="dataTables_wrapper">
        <div class="dataTables_buttons hidden-sm-down actions tpv-table-btns clearfix">
            <div class="tpv-table-group-btns clearfix">
                <button type="button" class="btn tpv-group-item tpv-btn-default btn-secondary" onclick="search()" style="min-width:75px;">[[#{user.flush}]]</button>
                <button type="button" class="btn tpv-group-item tpv-btn-default btn-secondary" onclick="editMeeting()" style="min-width:75px">[[#{meeting.option.edit}]]</button>
                <button type="button" class="btn tpv-group-item tpv-btn-default btn-secondary" onclick="editRepeatMeeting()" style="min-width:75px">[[#{meeting.option.repeat.edit}]]</button>
                <button type="button" class="btn tpv-group-item tpv-btn-default btn-secondary" onclick="deleteMeeting()" style="min-width:90px">[[#{meeting.option.delete}]]</button>
            </div>
            <div class="tpv-table-info-other">
                <button type="button" class="btn tpv-btn-primary btn-secondary" onclick="addMeeting()" style="width:96px">[[#{meeting.option.add}]]</button>
            </div>
            <div class="tpv-table-group-toggle">
                <div class="btn-group btn-group-toggle" data-toggle="buttons" id="filter_state">
                    <label class="btn btn-save active" id="toBeJoin" style="min-width:75px;">
                        <input type="radio" name="state" value="0" data-th-text="#{meeting.list.tojoin}" checked>
                    </label>
                    <label class="btn btn-save" id="joined" style="min-width:75px;">
                        <input type="radio" name="state" value="1" data-th-text="#{meeting.list.joined}">
                    </label>
                </div>
            </div>
        </div>
        <table id="meetingTable" data-mobile-responsive="true" class="mb-bootstrap-table text-nowrap"></table>
    </div>
</div>

<script type="text/x-handlebars-template" id="meeting-detail-template" style="text-align:center;">
    <div class="meeting-detail-box">
        <div>
            <a href="javascript:void(0)" class="meeting-detail" title="{{name}}" style="overflow: hidden; text-overflow:ellipsis; white-space: nowrap; width: 160px; display: block; text-align:center;">{{name}}</a>
        </div>
    </div>
</script>
<script type="text/x-handlebars-template" id="meeting-content-template" style="text-align:center;">
    <div class="meeting-detail-box">
        <div>
            <div class="meeting-content" style="overflow: hidden; text-overflow:ellipsis; white-space: nowrap; display: block; width: 240px; text-align:center;">{{content}}</div>
        </div>
    </div>
</script>